<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery" :labelCol="{ style: 'width: 100px' }">
        <a-row>
          <!-- <a-col :md="5" :sm="24" >
            <a-form-item label="设备位置">
              <a-select v-model="alarmLocations" mode="multiple" placeholder="请选择设备位置" :show-arrow='true'  @change="alarmLocationChange">
                  <a-select-option value="SYS">站台</a-select-option>
                  <a-select-option value="UP">上行</a-select-option>
                  <a-select-option value="DOWN">下行</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :md="5" :sm="24" >
            <a-form-item label="设备位置">
              <a-tree-select
                v-model="locations"
                style="width: 100%"
                class="treeSelect"
                :tree-data="equipData"
                tree-checkable
                :show-checked-strategy="SHOW_CHILD"
                placeholder="请选择设备位置"
                :maxTagCount='0'
                :dropdownStyle="{height:'280px'}"
                :show-arrow='true'
                @change="alarmDeviceCodesChange"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :md="5" :sm="24">
            <a-form-item label="设备类型">
              <a-select placeholder="请选择设备名称" mode="multiple" :show-arrow='true' v-model="deviceNames" @change="alarmDeviceNamesChange">
                <a-select-option value="A门电子锁">电子锁</a-select-option>
              </a-select>                
            </a-form-item>
          </a-col>                      -->
          <a-col :md="5" :sm="24" >
            <a-form-item label="设备名称">
              <a-select placeholder="请选择设备名称" mode="multiple" :show-arrow='true' v-model="deviceNames" @change="alarmDeviceNamesChange">
                <a-select-option value="A门电子锁">A门电子锁</a-select-option>
                <a-select-option value="B门电子锁">B门电子锁</a-select-option>
                <a-select-option value="A门电机">A门电机</a-select-option>
                <a-select-option value="B门电机">B门电机</a-select-option>
              </a-select>             
            </a-form-item>
          </a-col> 
          <a-col :md="5" :sm="24" >
            <a-form-item label="健康值">
              <a-select style="width:90%" placeholder="请选择健康值" mode="multiple" :show-arrow='true' v-model="healthyTypes" @change="healthyTypesChange">
                <a-select-option value="健康">健康</a-select-option>
                <a-select-option value="亚健康">亚健康</a-select-option>
              </a-select>  
            </a-form-item>
          </a-col> 
          <a-col :md="4" :sm="24" >
            <span class="table-page-search-submitButtons" >
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
              <!-- <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a> -->
            </span>
          </a-col>          

 
          <!-- <a-col :md="5" :sm="24" >
            <a-form-item label="关联算法">
              <a-input placeholder="请选择关联算法" v-model="queryParam.deviceId"></a-input>
            </a-form-item>
          </a-col>   -->
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
    </div>

    <!-- table区域-begin -->
    <div>


      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">


        <span slot="action" slot-scope="text, record">
          <!-- <a @click="handleDetail(record)">详情</a> -->
          <!-- <a-divider type="vertical" /> -->
          <a-popconfirm title="确定重置预测吗?" @confirm="() => handleReset(record.id)">
            <a :disabled="$isDisable('healthPredictionAll:reset')">重置预测</a>
          </a-popconfirm>
          <!-- <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
        </span>

      </a-table>
    </div>

    <gd-healthy-prediction-modal ref="modalForm" @ok="modalFormOk"></gd-healthy-prediction-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import GdHealthyPredictionModal from './modules/GdHealthyPredictionModal'
  import { postAction, getAction } from '@/api/manage'
  import { TreeSelect } from 'ant-design-vue';
  const SHOW_CHILD = TreeSelect.SHOW_CHILD;
  import moment from 'moment';
  export default {
    name: 'GdHealthyPredictionList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      GdHealthyPredictionModal
    },
    data () {
      return {
        description: '健康预测管理表管理页面',
        // 表头
        columns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'设备位置',
            align:"center",
            dataIndex: 'deviceLocation'
          },          
          {
            title:'设备编号',
            align:"center",
            dataIndex: 'deviceCode'
          },
          {
            title:'设备类型',
            align:"center",
            dataIndex: 'deviceType'
          },          
          {
            title:'设备名称',
            align:"center",
            dataIndex: 'deviceName'
          },
          {
            title:'关联算法',
            align:"center",
            dataIndex: 'algorithmName'
          },
          {
            title:'健康值',
            align:"center",
            dataIndex: 'healthyTypeName'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/healthy/gdHealthyPrediction/list",
          delete: "/healthy/gdHealthyPrediction/delete",
          deleteBatch: "/healthy/gdHealthyPrediction/deleteBatch",
          exportXlsUrl: "/healthy/gdHealthyPrediction/exportXls",
          importExcelUrl: "healthy/gdHealthyPrediction/importExcel",
          
        },
        dictOptions:{},
        superFieldList:[],
        advanced: false,
        stations:[],
        SHOW_CHILD,
        equipData:[],
        deviceNames:[],
        alarmLocations:[],
        locations:[],
        healthyTypes:[]        
      }
    },
    created() {
      this.getStations()
      // this.getEquipmentType()
      this.getEquipData(); //编号
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      moment,
      getStations() {
        getAction('/track/init/getPlatformList').then(res => {
          if (res && res.code == 200) {
            console.log(res)
            this.stations = res.result
          }
        })
      },
      handleReset(id){
        console.log(id)
        getAction('/healthy/gdHealthyPrediction/resetPrediction',{id}).then(res => {
          if (res && res.code == 200) {
            this.$message.success(res.message)
            this.loadData()
          }
        })
      },
      // 设备名称
      alarmDeviceNamesChange(val){
        this.queryParam.deviceNames = val.join(',')
      },
      alarmLocationChange(val){
        this.queryParam.alarmLocations = val.join(',')
      },   
      // 设备编号
      alarmDeviceCodesChange(val){
        this.queryParam.locations = val.join(',')
      },      
      healthyTypesChange(val){
        this.queryParam.healthyTypes = val.join(',')
      },
      searchReset(){
        this.queryParam={
          alarmLocations:'',
          locations:'',
          deviceNames:'',
          healthyTypes:''
        }
        this.alarmLocations=[]
        this.locations=[]
        this.deviceNames=[]
        this.healthyTypes=[]
      }               
    }
  }
</script>
<style scoped lang="less">
  @import '~@assets/less/common.less';
  .treeSelect {
    /deep/.ant-select-selection--multiple .ant-select-selection__choice{
      visibility: hidden;
    }
    /deep/.ant-select-search__field {
      visibility: hidden;
    }
  }  
</style>